<template>
  <div class="form">
    <div class="form-item">
      <div class="label">科目：</div>
      <div class="input">
        <input type="text" v-model.trim="subject" placeholder="请输入科目" />
      </div>
    </div>
    <div class="form-item">
      <div class="label">分数：</div>
      <div class="input">
        <input type="text" v-model.number="score" placeholder="请输入分数" />
      </div>
    </div>
    <div class="form-item">
      <div class="label"></div>
      <div class="input">
        <button class="submit" @click="add">添加</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: "",
      subject: "",
    };
  },
  methods: {
    add() {
      this.$emit("add", this.subject, this.score);
      this.score = "";
      this.subject = "";
    },
  },
};
</script>

<style>
</style>